// 审批管理
<template>
    <div class="information">
        <div class="work-title">
            <div>
                <el-button size="mini" @click="backClick">返回</el-button>
            </div>
            <div>
                {{this.$route.query.titleName}} 流程设置
            </div>
            <div></div>
        </div>
        <div class="work-content">
            <div class="flow">
                <div class="flowTop">
                    默认审批流程
                </div>
                <div class="flowPerson">
                    <div>默认审批人：</div>
                    <ul>
                        <li class="flowLi" @click="approveDeleteClick(appInd)" v-for="(item,appInd) in approveList" :key="appInd">
                            <div v-if="item.profile" class="flowLiImg">
                                <img :src="item.profile" alt="">
                            </div>
                            <div v-else class="flowLiImgNo">
                                {{item.name | nameFun}}
                            </div>
                            <div class="flowLiName">
                                {{item.name}}
                            </div>
                        </li>
                        <li class="flowLi" @click="addApproveClick()">
                            <div class="addflowLi"></div>
                            <div class="flowLiName">
                                添加
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="flowPerson">
                    <div>默认抄送人：</div>
                    <ul>
                        <li class="flowLi" @click="copyListListsDeleteClick(copyInd)" v-for="(item,copyInd) in copyList" :key="copyInd">
                            <div v-if="item.profile" class="flowLiImg">
                                <img :src="item.profile" alt="">
                            </div>
                            <div v-else class="flowLiImgNo">
                                {{item.name | nameFun}}
                            </div>
                            <div class="flowLiName">
                                {{item.name}}
                            </div>
                        </li>
                        <li class="flowLi" @click="addcopyListClick">
                            <div class="addflowLi"> </div>
                            <div class="flowLiName">
                                添加
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="conditionBox">
                <div class="condition">
                    <div class="conditionTop">
                        分条件审批
                        <div class="conditionTopI">
                            i
                            <div class="conditionTopIFont">
                                <div class="conditionTopIFontsan"></div>
                                您可以为不同类型的审批配置审批人哦！
                            </div>
                        </div>
                    </div>
                    <div :class="{setCondition:!haveRequired,blueBorder:haveRequired}" @click="haveRequiredClick()">
                        新增
                    </div>
                    <div class="conditionRight">
                        根据审批条件设置审批人
                        <div class="conditionTopIs">
                            i
                            <div class="conditionTopIFonts">
                                <div class="conditionTopIFontsans"></div>
                                当员工发起审批时，根据审批内容，首先和“优先级1”的条件进行匹配。 </br>
                                如果匹配成功则审批单发送给该条件下的审批人； </br>
                                如果匹配不成功则继续进行匹配下一优先级的条件； </br>
                                都不能匹配时则审批发送给默认的审批人。
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="conditionUl">
                    <draggable v-model="conditionList" @start="drag=true" @end="drag=false" @update="datadragEnd">
                        <li class="conditionLi" v-for='(item,index) in conditionList'>
                            <div class="listIndex">
                                <div>优先级</div>
                                <div>{{index+1}}</div>
                            </div>
                            <div class="listContent">
                                <div class="listTop">
                                    <div class="listFont">
                                        {{item.conditionDesc}}
                                    </div>
                                    <div class="listRedact" @click="redactClick(index)">
                                        编辑
                                    </div>
                                    <div class="listDelete" @click="deleteClick(index)">
                                        删除
                                    </div>
                                    <div class="listImg">
                                        <div class="listImgFont">
                                            <div class="listImgFontsan"></div>
                                            上下拖动可调整优先级
                                        </div>
                                        <img src="/static/img/drag.png" alt="">
                                    </div>
                                </div>
                                <div class="listPerson">
                                    <div class="listPersonTop">
                                        审批人
                                    </div>
                                    <div class="flowLi" v-for="(iten,appInd) in item.approverList" :key="appInd">
                                        <div v-if="iten.profile" class="flowLiImg">
                                            <img :src="iten.profile" alt="">
                                        </div>
                                        <div v-else class="flowLiImgNo">
                                            {{iten.name | nameFun}}
                                        </div>
                                        <div class="flowLiName">
                                            {{iten.name}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </draggable>
                </ul>
            </div>
            <div class="addBut">
              <el-button type="primary" size="medium" @click="addClick">保存</el-button>
            </div>
        </div>
        <!-- 新增默认抄送人列表 -->
        <v-addPelete :isupdatePop="copyListShow" @affirm="copyAddClick" @cancel="copyCancelClick" :userselectpop="copyLists"></v-addPelete>
        <!-- 新增默认审批人列表 -->
        <v-addPeletes :isupdatePop="approveListShow" @affirm="approveAddClick" @cancel="approveCancelClick" :userselectpop="approveLists"></v-addPeletes>
        <!-- 删除询问框 -->
        <div class="deleteBox" v-show='deleteBoxShow'>
            <div class="deletekuang">
                <div class="deleteTop">
                    确定要删除此审批条件？
                </div>
                <div class="deleteButton">
                    <el-button type="primary" size="medium" @click="deleteOkClick">确认</el-button>
                    <el-button type="primary" size="medium" @click="deleteCancelClick">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import addPeletes from "../../cModel/addressPelete.vue";
import addPelete from "../../cModel/addPelete.vue";
import draggable from "vuedraggable";
var mainOverflow = document.getElementById("mainOverflow");
export default {
  components: {
    draggable,
    "v-addPelete": addPelete,
    "v-addPeletes": addPeletes
  },
  data() {
    return {
      copyList: [], // 抄送展示人列表
      copyListShow: false, // 选择抄送人弹出框
      copyLists: [], // 已有默认抄送人ids
      approveList: [], // 审批人列表
      approveListShow: false, // 选择审批人弹出框
      approveLists: [], //已有审批人列表
      haveRequired: false,
      conditionList: [], //审批条件列表
      deleteBoxShow: false, //删除弹出框
      conditionId: "" //删除审批条件的id
    };
  },
  filters: {
    nameFun: function(val) {
      if (val) {
        if (val.length > 2) {
          return val.slice(val.length - 2);
        } else {
          return val;
        }
      }
    }
  },
  created: function() {
    var self = this;
    if (this.$route.query.haveRequired == "true") {
      this.haveRequired = true;
    } else {
      this.haveRequired = false;
    }
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      self
        .getapprovalsetgetdefaultprocess({
          modelId: self.$route.query.modelId
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.approvers) {
                self.approveList = data.data.approvers;
              }
              if (data.data.copys) {
                self.copyList = data.data.copys;
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
      self.getconditionList();
    }
  },
  methods: {
    // 获取条件列表
    getconditionList() {
      var self = this;
      self.conditionList = [];
      self
        .getapprovalconditiongetapproverlist({
          modelId: self.$route.query.modelId
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.conditionList = data.data;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    // 添加默认抄送人
    addcopyListClick() {
      this.copyListShow = true;
      this.copyLists = this.copyList;
    },
    // 删除默认抄送人
    copyListListsDeleteClick(index) {
      var self = this;
      self.copyList.splice(index, 1);
    },
    // 添加默认抄送人确认
    copyAddClick(val) {
      this.copyList = val;
      this.copyListShow = false;
    },
    // 添加默认抄送人取消
    copyCancelClick(val) {
      this.copyListShow = false;
      this.copyList = val;
    },
    // 添加默认审批人确认
    approveAddClick(val) {
      this.approveList = val;
      this.approveListShow = false;
    },
    // 添加默认审批人取消
    approveCancelClick(val) {
      this.approveListShow = false;
      this.approveList = val;
    },
    // 添加默认审批人
    addApproveClick() {
      this.approveListShow = true;
      console.log("默认审批人", this.approveList);
      this.approveLists = this.approveList;
    },
    // 删除审批人
    approveDeleteClick(appInd) {
      this.approveList.splice(appInd, 1);
    },
    // 返回
    backClick() {
      this.$router.push({
        path: "/home/examine"
      });
    },
    //新增
    haveRequiredClick() {
      if (this.haveRequired) {
        this.$router.push({
          path: "/home/setApprover",
          query: {
            titleName: this.$route.query.titleName,
            modelId: this.$route.query.modelId
          }
        });
      } else {
        this.$message("没有审批条件可以来设置审批人，请先设置必选选项");
      }
    },
    //编辑
    redactClick(index) {
      this.$router.push({
        path: "/home/setApprover",
        query: {
          titleName: this.$route.query.titleName,
          modelId: this.$route.query.modelId,
          conditionId: this.conditionList[index].conditionId
        }
      });
    },
    //删除
    deleteClick(index) {
      this.conditionId = this.conditionList[index].conditionId;
      this.deleteBoxShow = true;
      mainOverflow.style.overflowY = "hidden";
    },
    //确定删除
    deleteOkClick() {
      var self = this;
      self
        .getapprovalsetdeleteprocess({
          modelId: self.$route.query.modelId,
          conditionId: self.conditionId
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.getconditionList();
            self.$message("删除成功");
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
      this.deleteBoxShow = false;
      mainOverflow.style.overflowY = "auto";
    },
    //删除取消
    deleteCancelClick() {
      this.deleteBoxShow = false;
      mainOverflow.style.overflowY = "auto";
    },
    //排序
    datadragEnd() {
      var self = this;
      var arr = [];
      for (var i = self.conditionList.length; i > 0; i--) {
        arr.push(i);
      }
      for (var i = 0; i < arr.length; i++) {
        self.conditionList[i].sort = arr[i];
      }
      var arry = [];
      self.conditionList.forEach(function(ele, ind) {
        arry.push({
          sort: ele.sort,
          conditionId: ele.conditionId
        });
      });
      self
        .getapprovalconditionsort({
          modelId: self.$route.query.modelId,
          sortArray: JSON.stringify(arry)
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.$message("调整成功");
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    // 保存
    addClick() {
      var self = this;
      var approverIdStrs = "";
      var approverIdStrsArr = [];
      if (self.approveList.length > 0) {
        self.approveList.forEach(function(ele, ind) {
          approverIdStrsArr.push(ele.memberId);
        });
        approverIdStrs = approverIdStrsArr.join(",");
      }
      var copyIdStrs = "";
      var copyIdStrsArr = [];
      if (self.copyList.length > 0) {
        self.copyList.forEach(function(ele, ind) {
          copyIdStrsArr.push(ele.memberId);
        });
        copyIdStrs = copyIdStrsArr.join(",");
      }
      self
        .getapprovalsetupdatedefaultprocess({
          modelId: self.$route.query.modelId,
          approverIds: approverIdStrs,
          copyIds: copyIdStrs
        })
        .then(data => {
          if (data.statusCode == 200) {
            this.$router.push({
              path: "/home/examine"
            });
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    ...mapActions([
      "getapprovalsetupdatedefaultprocess",
      "getapprovalsetgetdefaultprocess",
      "getapprovalconditiongetapproverlist",
      "getapprovalsetdeleteprocess",
      "getapprovalconditionsort"
    ])
  },
  watch: {}
};
</script>
<style scoped>
.information {
  width: 100%;
  background-color: #fff;
  min-height: 600px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: wrap;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.work-title {
  height: 55px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-title > div:nth-child(1) {
  width: 58px;
  height: 26px;
  /* border: 1px solid #ebebeb; */
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 26px;
  margin-left: 15px;
  cursor: pointer;
}

.work-title > div:nth-child(2) {
  font-size: 14px;
  color: #333;
  margin-right: 15px;
}

.work-content {
  width: 100%;
  justify-content: space-between;
  overflow: hidden;
}

.flow {
  width: 80%;
  margin: 40px 10% 0 10%;
}

.flow > div {
  margin-top: 15px;
  margin-bottom: 15px;
}

.flowTop {
  font-size: 14px;
  color: rgb(50, 51, 52);
  width: 100%;
}

.flowPerson {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.flowPerson > div {
  width: 90px;
  margin-right: 10px;
  color: #999;
}

.flowPerson > ul {
  width: 750px;
  display: flex;
  flex-wrap: wrap;
}

.flowLi {
  width: 50px;
  height: 55px;
  margin: 5px 4px;
}

.addflowLi {
  width: 37px;
  height: 37px;
  margin: 0 auto;
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  background: url("/static/img/添加.png") 50% no-repeat;
  background-size: 120%;
}

.flowLiImg {
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  width: 37px;
  height: 37px;
  margin: 0 auto;
}

.flowLiImg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.flowLiName {
  width: 50px;
  height: 10px;
  font-size: 12px;
  text-align: center;
  color: #999;
}

.flowLiImgNo {
  border: 1px solid #d1d1d1;
  border-radius: 100%;
  width: 37px;
  height: 37px;
  margin: 0 auto;
  text-align: center;
  line-height: 37px;
  background: linear-gradient(
    151.7deg,
    rgba(102, 173, 247, 1),
    rgba(67, 144, 225, 0.5)
  );
}

.conditionBox {
  width: 90%;
  margin: 0 auto;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}

.condition {
  width: 90%;
  height: 50px;
  margin: 30px auto 10px;
  display: flex;
}

.conditionTop {
  width: 160px;
  height: 50px;
  line-height: 50px;
  display: flex;
}

.conditionTopI {
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  color: white;
  background: #aaa;
  margin: auto 10px;
  position: relative;
  border-radius: 100%;
  cursor: pointer;
}

.conditionTopIFont {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  width: 200px;
  letter-spacing: 2px;
  height: 36px;
  line-height: 18px;
  top: -63px;
  left: -90px;
  padding: 8px;
  border-radius: 5px;
  display: none;
}

.conditionTopIFontsan {
  border-top: 7px solid rgba(0, 0, 0, 0);
  border-right: 7px solid rgba(0, 0, 0, 0.75);
  border-bottom: 7px solid rgba(0, 0, 0, 0.75);
  border-left: 7px solid rgba(0, 0, 0, 0);
  position: absolute;
  bottom: -7px;
  left: 90px;
  transform: rotate(45deg);
}

.conditionTopI:hover > .conditionTopIFont {
  display: block;
}

.conditionTopIs {
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  color: white;
  background: #aaa;
  margin: auto 10px;
  position: relative;
  border-radius: 100%;
  cursor: pointer;
}

.conditionTopIFonts {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  width: 200px;
  letter-spacing: 2px;
  height: 163px;
  line-height: 18px;
  top: -193px;
  left: -90px;
  padding: 8px;
  border-radius: 5px;
  display: none;
  text-align: left;
}

.conditionTopIFontsans {
  border-top: 7px solid rgba(0, 0, 0, 0);
  border-right: 7px solid rgba(0, 0, 0, 0.75);
  border-bottom: 7px solid rgba(0, 0, 0, 0.75);
  border-left: 7px solid rgba(0, 0, 0, 0);
  position: absolute;
  bottom: -7px;
  left: 90px;
  transform: rotate(45deg);
}

.conditionTopIs:hover > .conditionTopIFonts {
  display: block;
}

.setCondition {
  width: 50px;
  height: 24px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 24px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #aaa;
  border: 1px solid #aaa;
}

.blueBorder {
  width: 50px;
  height: 24px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 24px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #49a9ee;
  border: 1px solid #49a9ee;
  border: 1px solid #49a9ee;
}

.conditionRight {
  width: 260px;
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-left: 40px;
}

.conditionUl {
  width: 738px;
  margin-left: 212px;
}

.conditionLi {
  width: 738px;
  min-height: 130px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  margin-bottom: 14px;
}

.listIndex {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: -60px;
  background: rgb(240, 239, 239);
}

.listIndex > div {
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #666;
}

.listTop {
  width: 738px;
  height: 50px;
  background: rgb(240, 239, 239);
  display: flex;
  line-height: 50px;
}

.listFont {
  width: 627px;
  padding: 0px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listRedact,
.listDelete {
  height: 50px;
  width: 32px;
  margin: 0 4px;
  cursor: pointer;
  color: #38adff;
}

.listImg {
  width: 30px;
  height: 50px;
  position: relative;
  font-size: 12px;
  color: white;
}

.listImgFont {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  width: 142px;
  letter-spacing: 2px;
  height: 18px;
  line-height: 18px;
  top: -35px;
  left: -66px;
  padding: 8px;
  border-radius: 5px;
  display: none;
}

.listImgFontsan {
  border-top: 7px solid rgba(0, 0, 0, 0);
  border-right: 7px solid rgba(0, 0, 0, 0.75);
  border-bottom: 7px solid rgba(0, 0, 0, 0.75);
  border-left: 7px solid rgba(0, 0, 0, 0);
  position: absolute;
  bottom: -7px;
  left: 72px;
  transform: rotate(45deg);
}

.listImg:hover > .listImgFont {
  display: block;
}

.listImg img {
  width: 24px;
  height: 24px;
  margin: 13px 3px;
}

.listPerson {
  display: flex;
}

.listPersonTop {
  width: 50px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 0 10px;
  color: #999;
}

.addBut {
  margin-left: 10%;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 70px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  letter-spacing: 4px;
  background: #49a9ee;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

.deleteBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.26);
  position: fixed;
  top: 0;
  left: 0;
}

.deletekuang {
  width: 300px;
  height: 150px;
  background: white;
  margin: 400px auto;
  border-radius: 4px;
}

.deleteTop {
  width: 300px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #38adff;
  font-size: 18px;
  border-bottom: 1px solid #999;
}

.deleteButton {
  display: flex;
  height: 34px;
  width: 220px;
  margin: 28px auto;
}

.deleteButton .el-button {
  margin: 0 20px;
}

.buttonOk {
  border: 1px solid #38adff;
  color: #38adff;
}

.buttonCancel {
  border: 1px solid #999;
  color: #999;
}
</style>